<template>
    <div>
        <Header :isGoBack="false" :class="isHeaderFixed ? 'fixed-header-shadow' : 'fixed-header'">
            <template v-slot:left>
                <div>
                    {{ checkedBookData.edition_name }}- {{ checkedBookData.grade_name }}>
                    打印试卷
                </div>
            </template>
            <template v-slot:right>
                <div class="test-btn">
                    <span class="btn-bg ml20">
                        <el-button class="button button-bg-second" @click="printTest">打印</el-button>
                    </span>
                    <span class="btn-bg ml20">
                        <el-button class="button button-border-second" @click="goStudyCenter">
                            返回测试中心
                        </el-button>
                    </span>
                </div>
            </template>
        </Header>
        <div class="w1200 general-test-box print-test-box">
            <div class="print-test-box-radio">
                <el-radio-group v-model="isShowAnswer">
                    <el-radio :label="0">隐藏答案</el-radio>
                    <el-radio :label="1">显示答案</el-radio>
                </el-radio-group>
            </div>
            <div id="printTest" ref="printTest" class="general-test print-test">
                <h3 class="test-title">
                    <span v-if="checkedBookData.edition_name && checkedBookData.grade_name">
                        智慧1+1{{ checkedBookData.edition_name }}-
                        {{ checkedBookData.grade_name }}</span>
                    <span>单词测试卷</span>
                </h3>
                <p class="test-name">学生姓名：<span class="line"></span></p>
                <div v-if="checkedBookData.book_id != 600">
                    <div class="question-type-container" v-if="type == 2 || type == 3">
                        <div class="type-title">
                            <span>{{ 1 }}.</span>
                            {{ typeObj[2] }}
                            <span>(共{{ sentenceList.length }}题)</span>
                        </div>
                        <ul class="question-list">
                            <table border="1" class="question-list-table" style="table-layout: fixed;">
                                <tr v-for="(question, qIndex) in sentenceList" :key="qIndex">
                                    <td class="question-index">
                                        <span class="mr10" style="display: inline-block;width: 20px;text-align: right;">{{
                                            qIndex + 1 }}</span>
                                        <span>
                                            <span v-if="!isShowAnswer" class="line" style="width: 306px"></span>
                                            <span v-if="isShowAnswer" class="line-answer">{{
                                                question.content
                                            }}</span>
                                        </span>
                                    </td>
                                    <td>
                                        {{ question.translation }}
                                    </td>
                                </tr>
                            </table>
                        </ul>
                    </div>
                    <div class="question-type-container" v-if="type == 1 || type == 3">
                        <div class="type-title">
                            <span>{{ type == 1 ? 1 : 2 }}.</span>
                            {{ typeObj[1] }}
                            <span>(共{{ sentenceList.length }}题)</span>
                        </div>
                        <ul class="question-list">
                            <table border="1" class="question-list-table" style="table-layout: fixed;">
                                <tr v-for="(question, qIndex) in sentenceList" :key="qIndex">
                                    <td class="question-index">
                                        <span class="mr10" style="display: inline-block;width: 20px;text-align: right;">{{
                                            qIndex + 1 }}</span>
                                        <span>
                                            <span v-if="!isShowAnswer" class="line" style="width: 306px"></span>
                                            <span v-if="isShowAnswer" class="line-answer">{{
                                                question.content
                                            }}</span>
                                        </span>
                                    </td>
                                    <td>
                                        <div>{{ question.translation }}</div>
                                        <div style="display: flex; flex-wrap: wrap">
                                            <span class="word" v-for="(item, index) in question.wordArr" :key="index">{{
                                                item
                                            }}</span>
                                        </div>
                                        <!-- {{ question.translation }} -->
                                    </td>
                                </tr>
                            </table>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/Header";
import { getSentenceByUnits, getPrintTest } from "@/api/index";
export default {
    data() {
        return {
            paperData: {},
            questionList: [],
            chunkQuestionList: [],
            typeObj: {
                1: "连词成句",
                2: "句子默写",
            },
            type: 1,
            checkedBookData: null,
            isHeaderFixed: false,
            isShowAnswer: 0,
            sentenceList: []
        };
    },
    computed: {
    },
    components: {
        Header,
    },
    methods: {
        // 句子数据
        // 随机数组
        randomSortArray(arr) {
            var len = arr.length;
            for (var i = len - 1; i >= 0; i--) {
                var randomIndex = Math.floor(Math.random() * (i + 1));
                var temp = arr[randomIndex];
                arr[randomIndex] = arr[i];
                arr[i] = temp;
            }
            return arr;
        },
        async getSentenceByUnits() {
            let { questionType, unitId } = this.$route.query
            console.log(this.questionType);
            if (this.questionType.length == 2) {
                questionType = 3
            }
            const { data } = await getSentenceByUnits({ type: questionType, unitIds: unitId })
            this.type = data.type
            if (this.type == 2) {
                this.sentenceList = data.list
                return
            }
            if (this.type == 1 || this.type == 3) {
                this.sentenceList = data.list.map(item => {
                    item.content = item.content.trim()
                    let charString = item.content.substr(item.content.length - 1, 1)
                    item.wordArr = item.content.slice(0, item.content.length - 1).split(" ")
                    item.wordArr = this.randomSortArray(item.wordArr)
                    item.wordArr.push(charString)
                    return item
                })
            }

        },
        printTest() {
            //   PrintJS({
            //     printable: "printTest",
            //     type: "html",
            //     documentTitle: "测验",
            //     // scanStyles: false,
            //     // 继承原来的所有样式
            //     targetStyles: ["*"],
            //     // css: "/assets/css/print.css",
            //   });
            this.$print(this.$refs.printTest);
            // window.print();
        },
        goStudyCenter() {
            this.$router.push({
                name: "sentenceTestCenter",
            });
        },
    },
    created() {
        this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
        this.questionType = this.$route.query.questionType
            ? String(this.$route.query.questionType).split(",").map(Number)
            : null;
        this.getSentenceByUnits()
    },
    watch: {},
};
</script>

<style lang="scss" scoped>
.word {
    padding: 2px 5px;
    margin-bottom: 5px;
    margin-right: 2px;
    border: 1px solid #7A7A7A;
    border-radius: 4px;
}</style>